import React, { Component } from 'react';
import './index.css'
import Swiper from 'swiper/dist/js/swiper.js'
import 'swiper/dist/css/swiper.css'
class Banner extends Component {
  godetail(Id) {
    this.props.history.push({
      pathname: '/detail/' + Id,
      state: {
        Id
      }
    })
  }
  componentDidMount() {
    this.initSwiper();
  }
  initSwiper() {
    this.mySwiper = new Swiper('.swiper-container', {
      observer: true,
      observeSlideChildren: true,
      loop: true,
      speed: 1000,
      autoplay: {
        delay: 900,
        stopOnLastSlide: false,
      },
      Pagination:{
        el:'.swiper-pagination'
      }
    });
  }
  render() {
    // console.log(this.props.data);
    return (
      <div className='banner-box'>
        <div className="swiper-container">
          <div className="swiper-wrapper">
            {this.props.data && this.props.data.map(val=>{
              return(
                <div className="swiper-slide" key={val.book_id}>
                         <img src={val.img_url} alt="" />
                </div>
              )
              })}
          </div>
        </div>

      </div>
    );
  }
}
export default Banner